<template>
  <el-dialog
    v-el-drag-dialog
    class="cylinderFlowControl-detailDialog"
    :title="type | titleText"
    :visible.sync="isShow"
    width="850px"
    @closed="close"
  >
    <lb-table
      ref="lbTable"
      border
      highlight-current-row
      element-loading-text="加载中"
      :column="column"
      :data="tableData"
    />
  </el-dialog>
</template>

<script>
  import { queryReceiveBottleDetail } from '@/api'
  export default {
    filters: {
      titleText(val) {
        switch (val) {
        case 1:
          return '领瓶明细'
        case 2:
          return '还瓶明细'
        }
      }
    },
    data() {
      return {
        isShow: false,
        tableData: [],
        rowData: {},
        type: 1
      }
    },
    computed: {
      column() {
        return [
          { label: '商品', prop: 'goodsName', width: 150, align: 'center' },
          {
            label: '状态',
            prop: 'gdStatus',
            width: 80,
            align: 'center'
          // formatter: this.formatter.gdStatusFormat,
          },
          { label: '数量', prop: 'gdCount', width: 80, align: 'center' },
          {
            label: '钢瓶编码',
            prop: 'bottleCode',
            width: 250,
            align: 'center',
            render: (h, { row }) => <div class='wrap'>{row.bottleCode}</div>
          },
          {
            label: '芯片编码',
            prop: 'chipCode',
            align: 'center',
            render: (h, { row }) => <div class='wrap'>{row.chipCode}</div>
          }
        ]
      }
    },
    methods: {
      close() {},
      show(type, row) {
        this.type = type
        this.rowData = row
        this.isShow = true
        this.getTableData()
      },
      async getTableData() {
        const params = {
          invenBillCode: this.rowData.invenBillCode
        }
        const { status, data } = await queryReceiveBottleDetail(params)
        if (status === 200) {
          this.tableData = data
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
.cylinderFlowControl-detailDialog {
  /deep/.wrap {
    width: 200px;
    word-break: break-all;
    word-wrap: break-word;
    white-space: pre-wrap;
  }
}
</style>
